<!--
* @author: XJC
* @date: 2023-11-27 10:15
* @description：我的任务-用户端
* @update: 2023年11月28日08:38:00
-->
<template>
  <div class="container">
    <div class="app-container">
      <div class="radioBox" v-if="isLogin">
        <el-radio-group v-model="flag" size="medium">
          <el-radio-button :label="false"> 全部任务 </el-radio-button>
          <el-radio-button :label="true"> 我的任务 </el-radio-button>
        </el-radio-group>
      </div>
      <div class="contentBox">
        <div class="inventory-top form-top">
          <el-form ref="taskForm" :model="taskForm" label-width="104px">
            <el-row :gutter="24">
              <el-col :span="7">
                <el-form-item label="日计划编号">
                  <el-select
                    style="width: 100%"
                    v-model="taskForm.dayNo"
                    filterable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="(item, index) in dayNoList"
                      :key="index"
                      :label="item"
                      :value="item"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="工作任务">
                  <el-select
                    style="width: 100%"
                    v-model="taskForm.name"
                    filterable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="(item, index) in taskFormList"
                      :key="index"
                      :label="item"
                      :value="item"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="开始时间">
                  <el-date-picker
                    v-model="dateTimeRange"
                    type="daterange"
                    unlink-panels
                    :clearable="false"
                    align="center"
                    value-format="yyyy-MM-dd"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="24" style="text-align: center">
                <el-button class="chamfer-98" type="primary" @click="searchBtn"
                  >查询</el-button
                >
                <el-button
                  style="margin-left: 20px"
                  class="chamfer-98"
                  plain
                  @click="resetBtn"
                  >重置</el-button
                >
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="inventory-bot table-normal">
          <el-table
            v-loading="loading"
            element-loading-background="rgba(0, 0, 0, 0.6)"
            ref="refTable"
            :data="taskTable"
            :row-key="getRowKeys"
            :expand-row-keys="expands"
            fit
            style="width: 100%"
            header-row-class-name="tableHeader"
            header-cell-class-name="tableTrHeader"
            row-class-name="tableRow"
            cell-class-name="tableCell"
            @row-click="clickTable"
            @expand-change="expandSelect"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="expand" width="1">
              <template v-slot="{ row }">
                <el-table
                  :data="row.secondTable"
                  border
                  header-row-class-name="tableHeaderSnd"
                  header-cell-class-name="tableTrHeaderSnd"
                  row-class-name="tableRowSnd"
                  cell-class-name="tableCellSnd"
                  style="width: 98%; margin: 0 auto"
                >
                  <el-table-column
                    prop="goodsName"
                    label="物料名称"
                    align="center"
                  />
                  <el-table-column
                    prop="goodsModel"
                    label="规格型号"
                    align="center"
                  />
                  <el-table-column
                    prop="planCount"
                    label="待取数量"
                    align="center"
                    v-if="row.type === 1"
                  />
                  <el-table-column
                    prop="planCount"
                    label="待还数量"
                    align="center"
                    v-if="row.type === 2"
                  />
                  <el-table-column
                    prop="realCount"
                    label="已取数量"
                    align="center"
                    v-if="row.type === 1"
                  >
                    <template v-slot="{ row }">
                      <p class="useBox">
                        <span>
                          {{ row.realCount }}
                        </span>
                        <el-button class="useBtn" size="mini" @click="useBtn(row)">
                          领用详情
                        </el-button>
                      </p>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="realCount"
                    label="已还数量"
                    align="center"
                    v-if="row.type === 2"
                  >
                    <template v-slot="{ row }">
                      <p class="useBox">
                        <span>
                          {{ row.realCount }}
                        </span>
                        <el-button class="useBtn" size="mini" @click="useBtn(row)">
                          归还详情
                        </el-button>
                      </p>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              type="selection"
              width="80"
              label-class-name="DisabledSelection"
            />
            <el-table-column
              type="index"
              label="序号"
              width="80"
              align="center"
            />
            <el-table-column
              prop="dayNo"
              label="日计划编号"
              width="120"
              align="center"
            />
            <el-table-column
              prop="name"
              label="工作任务名称"
              width="180"
              :show-overflow-tooltip="true"
              align="center"
            />
            <el-table-column
              prop="isReceive"
              label="状态"
              align="center"
              width="90"
            >
              <template v-slot="{ row }">
                <!-- 0-未领取 1-领取中 2-已结束 -->
                <span
                  :class="
                    row.isReceive == 0
                      ? 'unclaimed'
                      : row.isReceive == 1
                      ? 'receiving'
                      : 'ended'
                  "
                >
                  {{
                    row.isReceive == 0
                      ? '未领取'
                      : row.isReceive == 1
                      ? '领取中'
                      : '已结束'
                  }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="startTime"
              label="计划开始时间"
              align="center"
              width="200"
            />
            <el-table-column
              prop="type"
              label="出入库类型"
              width="120"
              align="center"
            >
              <template v-slot="{ row }">
                <span>
                  {{ row.type == 0 ? '未知' : row.type == 1 ? '出库' : '入库' }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="nickName"
              label="指派人员"
              width="100"
              align="center"
            />
            <el-table-column
              prop="createTime"
              label="创建时间"
              align="center"
              width="200"
            />
            <el-table-column
              prop="createBy"
              label="创建人员"
              width="100"
              align="center"
            />
            <!-- v-if="flag"是用来区分'全部'还是'我的' -->
            <el-table-column
              label="操作"
              align="center"
              width="100"
              v-if="flag"
            >
              <template v-slot="{ row }">
                <div
                  class="controlBox receive"
                  v-if="!row.isReceive"
                  @click.stop="receiveBtn(row)"
                >
                  领取
                </div>
                <div class="controlBox end" v-else>领取</div>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <paging-component
            :total="total"
            :page-size="taskForm.currentSize"
            :current-page="taskForm.currentPage"
            @handleSizeChange="handleSizeChange"
            @handleCurrentChange="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <realTimeStorage
      :model="3"
      :taskName="taskName || '默认任务'"
      :showDialog.sync="showTimeDialog"
      :inOutList="inOutList"
      :goodsList="goodsList"
      :taskId="taskId"
      :taskDetailId="taskDetailId"
      :isType="type"
      @operationCompleted="operationCompleted"
      ref="realTimeStorage"
    />
    <el-dialog
      title="详情"
      :visible="showUseDialog"
      width="666px"
      center
      custom-class="my-dialog  table-normal use-dialog"
      @close="close"
    >
      <el-table
        :data="detailsTable"
        fit
        style="width: 100%"
        header-row-class-name="tableHeader"
        header-cell-class-name="tableTrHeader"
        row-class-name="tableRow"
        cell-class-name="tableCell"
      >
        <el-table-column type="index" label="序号" align="center" width="80" />
        <!-- <el-table-column prop="goodsName" label="物料名称" align="center" /> -->
        <!-- <el-table-column prop="goodsModel" label="规格型号" align="center" /> -->
        <el-table-column prop="shelvesName" label="货架名称" align="center" />
        <el-table-column prop="positionCode" label="库位号" align="center" >
          <template v-slot="{ row }">
            {{row.layerSort}}-{{row.positionName}}
          </template>
        </el-table-column>
        <el-table-column prop="realCount" label="操作数量" align="center" />
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import {
  getTaskList,
  getTaskDetail,
  getQueryDayNoList,
  getQueryNameList
} from '@/api/taskManage'
import pagingComponent from '@/components/PagingComponent/index.vue'
import RealTimeStorage from '@/components/realTimeStorage/index.vue'
import { mapGetters } from 'vuex'
export default {
  components: { pagingComponent, RealTimeStorage },
  data() {
    return {
      flag: false, // 用于切换
      // 任务表单
      taskForm: {
        dayNo: '', // 日计划编号
        startTime: '', // 开始时间
        endTime: '', // 结束时间
        name: '', // 工作任务名称
        currentPage: 1, // 页码
        currentSize: 20, // 页尺寸
        isMe: false // 是否是我的任务
      },
      dateTimeRange: [], // 时间范围
      taskName: '', // 任务名称
      taskId:'', // 任务id
      taskDetailId:'', // 任务详情id
      total: 0, // 任务总数
      dayNoList: [], // 日计划编号
      taskFormList: [], // 任务列表
      taskTable: [], // 库存余量预警记录列表
      expands: [], // 展开行,数组形式
      multipleSelection: [], // 表格选中数据
      loading: true, // 表格加载
      goodsForWsList: [], // websocket出入库列表
      goodsList: [], // 出入库列表
      inOutList: [], // webSocket返回的数据
      type: 0, // 出入库状态
      showTimeDialog: false, // 控制实时出入库弹窗
      detailsTable: [], // 领用详情表格
      showUseDialog: false // 控制领用详情弹窗
    }
  },
  created() {
    this.renderList()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素，一般在此执行：开启定时器，发送网络请求，订阅消息，绑定自定义事件等初始化操作。）
  mounted() {
    this.$eventBus.$on('webSocketMsgPage', this.operateMessage)
  },
  // 生命周期-页面销毁前（在销毁前，实例中所有的data、methods、computed、指令等，都处于可用状态在此阶段，一般进行：关闭定时器、取消订阅消息解绑自定义事件等收尾工作。）
  beforeDestroy() {
    this.$eventBus.$off('webSocketMsgPage', this.operateMessage)
  },
  computed: {
    ...mapGetters(['isLogin'])
  },
  watch: {
    isLogin(val) {
      if (!val) {
        this.flag = false
      }
    },
    flag(val) {
      if (val) {
        this.taskForm = {
          dayNo: '',
          startTime: '',
          name: '',
          currentPage: 1,
          currentSize: 20,
          isMe: true
        }
        this.dateTimeRange = []
        this.renderList()
      } else {
        this.taskForm = {
          dayNo: '',
          startTime: '',
          name: '',
          currentPage: 1,
          currentSize: 20,
          isMe: false
        }
        this.dateTimeRange = []
        this.renderList()
      }
    }
  },
  methods: {
    // 获取列表
    async renderList() {
      // 加载动画开始
      this.loading = true
      const { result } = await getTaskList(this.taskForm)
      this.total = Number(result.totalCount)
      this.taskTable = result.currentData
      // 获取日计划编号下拉列表
      const { result: dayNoList } = await getQueryDayNoList()
      this.dayNoList = dayNoList
      // 获取工作任务下拉列表
      const { result: taskFormList } = await getQueryNameList()
      this.taskFormList = taskFormList
      // 清空撤销id
      this.revId = ''
      // 折叠所有二级表格
      this.expands = []
      // 加载动画结束
      this.loading = false
    },
    // 查询
    searchBtn() {
      this.taskForm.currentPage = 1
      if(this.dateTimeRange.length>0){
        this.taskForm.startTime = this.dateTimeRange[0] + ' 00:00:00';
        this.taskForm.endTime = this.dateTimeRange[1] + ' 23:59:59';
      }
      this.renderList()
    },
    // 重置
    resetBtn() {
      this.taskForm = {
        dayNo: '', // 物料名称
        startTime: '', // 计划开始时间
        name: '', // 工作内容
        currentPage: 1, // 页码
        currentSize: 20 // 页尺寸
      }
      this.dateTimeRange = []
      if (this.flag) {
        this.taskForm.isMe = true
      } else {
        this.taskForm.isMe = false
      }
      this.renderList()
    },
    // 领取按钮
    async receiveBtn(row) {
      this.type = row.type
      this.taskId = row.id
      let { result } = await getTaskDetail({ taskId: row.id })
      this.goodsList = result
      // this.taskDetailId = row.id
      this.goodsList.forEach((item) => {
        this.$set(item, 'realCount', 0)
        this.$set(item, 'type', row.type)
        this.$set(item, 'taskName', row.name)
      })
      this.$store.commit('settings/CHANGE_SETTING', {
        key: 'isRealTimeOpen',
        value: true
      })
      this.taskName = row.name
      this.showTimeDialog = true
    },
    // 领用详情按钮
    useBtn(row){
      this.showUseDialog = true
      this.detailsTable = row.detailList
    },
    // 接收websocket消息
    operateMessage(data) {
      if (data.type === 'inout' && data.message === 'closed') {
        this.inOutList = []
      } else {
        // if (data.type === 'inout' && data.message !== 'closed')
        if (this.showTimeDialog) {
          this.inOutList = JSON.parse(data.message)
        }
      }
    },
    // 实时出入库弹窗确认按钮
    operationCompleted() {
      this.showTimeDialog = false
      this.showDialog = false
      this.searchBtn()
    },
    // pageSize改变时会触发(每页数据条数)
    handleSizeChange(val) {
      this.taskForm.currentSize = val
      this.renderList()
    },
    // currentPage改变时会触发(当前页码数)
    handleCurrentChange(val) {
      this.taskForm.currentPage = val
      this.renderList()
    },
    // 获取勾选数据表格
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 点击表格行
    async clickTable(row, index, e) {
      // 加载动画开始
      this.loading = true
      this.$refs.refTable.toggleRowExpansion(row)
      if (!row.secondTable) {
        // 获取当前表格序号
        let i = this.taskTable.findIndex((ele) => ele.id == row.id)
        // 请求表格详情接口
        let { result } = await getTaskDetail({ taskId: row.id })
        let secondArray = result
        // let secondArray = []
        // result.forEach((item) => {
        //   if (item.detailList) {
        //     secondArray.push(...item.detailList)
        //   }
        // })
        // 将获取的详情放置到当前行的secondTable属性中
        this.$set(this.taskTable[i], 'secondTable', secondArray)
      }
      // 加载动画结束
      this.loading = false
    },
    // 每行的唯一key值 用其id表示
    getRowKeys(row) {
      return row.id
    },
    // 展开行同时折叠其他行
    expandSelect(row, expandedRows) {
      let that = this
      if (expandedRows.length) {
        that.expands = []
        if (row) {
          that.expands.push(row.id)
        }
      } else {
        that.expands = []
      }
    },
    // 关闭弹窗清空所有值
    close() {
      this.showUseDialog = false
    }
  }
}
</script>
<style lang="scss">
@import '~@/styles/_handle.scss';

.is-active {
  .el-radio-button__inner {
    @include background('radio_bg_active');
  }
}
.el-radio-button__inner {
  @include background('radio_bg');
}
.contentBox {
  border: 1px solid;
  @include border_image('container_border');
  @include background('content_bg_color');
}
.inventory-bot {
  .el-table {
    // 表格全选框去除空框
    .DisabledSelection .cell .el-checkbox__inner {
      display: none;
      position: relative;
    }
    .el-table__body-wrapper{
      height: calc(100% - 48px);
      overflow-y: auto;
    }
    .el-table__body-wrapper::-webkit-scrollbar{
      width: 6px;
      height: 8px;
    }
    // 二级
    .tableTrHeaderSnd {
      font-weight: normal;
      border: 1px solid;
      @include border_color('second_table_border_color');
      @include background('second_table_head_bg_color');
    }
    // 二级
    .tableCellSnd {
      color: #ffffff;
      font-size: 18px;
      border: 1px solid;
      @include border_color('second_table_border_color');
      @include background('second_table_row_bg_color');
    }
    .expanded {
      @include background('second_table_expanded_bg_color');
    }
  }
}
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
  @include background('table_hover_color');
}
.use-dialog .el-table .el-table__body-wrapper{
  @include border_color('second_table_border_color');
}
</style>
<style scoped lang="scss">
@import '~@/styles/_handle.scss';
.inventory-top {
  @include background('table_head_bgcolor');
}

::v-deep .radioBox {
  text-align: center;
  .el-radio-button:first-child {
    .el-radio-button__inner {
      border: none;
      margin-right: -16px;
    }
  }
  .is-active {
    .el-radio-button__inner {
      border: none;
      box-shadow: none;
    }
  }
  .el-radio-button__inner {
    width: 188px;
    height: 54px;
    border: none;
    line-height: 36px;
    font-size: 20px;
    box-shadow: none;
    color: rgba($color: #fff, $alpha: 0.8);
  }
}
.container{
  height: 100%;
}
.app-container {
  height: calc(100% - 50px);
  padding: 20px 30px;
}
::v-deep .contentBox {
  width: 100%;
  height: calc(100% - 54px);
  padding: 32px 17px 0;
  margin: 0 auto;
  border-radius: 10px;
  .inventory-top {
    padding: 20px;
    width: 100%;
    height: 141px;
    border-radius: 10px;
    .el-form-item {
      margin-bottom: 16px;
    }
    .chamfer-98 {
      font-size: 18px;
    }
  }
  .inventory-bot {
    height: calc(100% - 141px);
    padding: 20px 10px;
    .btnBox {
      height: 44px;
      .chamfer-98 {
        font-size: 18px;
        text-align: center;
        .btn-middle {
          display: flex;
          align-items: center;
          .btn-icon {
            margin-left: 4px;
            width: 16px;
            height: 16px;
          }
        }
      }
    }
    .el-table {
      height: calc(100% - 120px);
      tr {
        background: transparent;
      }
      margin-top: 14px;
      background: transparent;
      border: none;
      .tableTrHeader {
        border: none;
      }
      // 二级
      .tableHeaderSnd {
        color: #ffffff;
        font-size: 18px;
      }
      // 隐藏折叠小箭头
      .el-table__expand-icon {
        color: transparent;
      }
    }
  }
}
// 二级表格行背景色透明
::v-deep .el-table__cell.el-table__expanded-cell {
  background: transparent;
}
// 暂无数据时展示样式
::v-deep .el-table__empty-block {
  min-height: 240px;
  font-size: 20px;
}
// 取消表格底部横线
::v-deep .el-table--border::after,
.el-table--group::after,
.el-table::before {
  content: none;
}
.controlBox {
  font-weight: 700;
  font-size: 18px;
  cursor: pointer;
}
.receive {
  @include font_color('material_edit_color');
}
.end {
  color: #777777;
}
.revoke {
  color: #ff3a3a !important;
}
.useBox{
  display: flex;
  margin: 0;
  justify-content: center;
  align-items: center;
  padding-left: 120px;
  .useBtn{
    font-size: 14px;
    margin-left: 30px;
  }
}
::v-deep .use-dialog .el-table{
  margin-top: 0;
}
::v-deep .use-dialog .el-table .el-table__body-wrapper{
  height: 420px;
  overflow-y: auto;
  border: 1px solid;
  border-radius: 10px;
}
</style>
